<template>
    <div>
        <!--顶部筛选区域-->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-input v-model="form.name" placeholder="请输入名称" clearable style="max-width: 220px;" @clear="_signContractList(1)"></el-input>
                <el-select v-model="form.area" clearable placeholder="请选择区域" @clear="clearArea">
                    <el-option
                        v-for="item in areaList"
                        :key="item.id"
                        :label="item.city_name"
                        :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="form.store" clearable placeholder="请选择门店" @clear="clearStore">
                    <el-option
                        v-for="item in storeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
                <el-button style="margin-left: 20px;" @click="_signContractList(1)">搜索</el-button>
                <el-button type="primary" @click="addContract" style="float: right">新建合同</el-button>
            </el-col>
        </el-row>

        <!--表格开始-->
        <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column
                    label="合同名称">
                <template slot-scope="scope">
                    <span @dblclick="editContractName(scope.$index, scope.row)" v-show="scope.row.is_show" style="cursor: pointer">{{ scope.row.name }}</span>
                    <el-input v-model="scope.row.name" v-show="!scope.row.is_show" @keyup.enter.native="$event.target.blur" @blur="makeSure(scope.$index, scope.row)" :ref="'input' + scope.row.id"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    label="对应区域">
                <template slot-scope="scope">
                    <span>{{ scope.row.merch_name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="对应门店">
                <template slot-scope="scope">
                    <span>{{ scope.row.store_name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini"
                               type="warning"
                               @click="handlePreview(scope.$index, scope.row)">预览</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>

        <!--新建合同的dialog-->
        <el-dialog
                :visible.sync="dialogAdd"
                width="50%"
                @close="dialogAddClose"
                :close-on-click-modal="false">
            <!--这里的插槽会替换title显示的内容-->
            <div slot="title" class="header-title">
                <p class="title-name">新建合同</p>
                <p class="title-info">合同文件必须为pdf格式</p>
            </div>
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="合同名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请定义合同名称"  style="width: 204px"></el-input>
                </el-form-item>
                <el-form-item label="选择文件" required>
                    <UpPdf @chooseFile="chooseFile" :fileList="fileList" :progressSeen="progressSeen" @handleChangeFile="changeFile"></UpPdf>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogAdd = false">取 消</el-button>
                <el-button type="primary" @click="dialogAddSure">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '../../components/pagination'
    import UpPdf from  '../../components/uploadPdf'
    import { signContractList, addContract, editContract, deleteContract, merchList, storeList } from '../../api/signContractApi'
    export default {
        name: "contract-configuration",
        data() {
            return {
                form: {
                    name: '',
                    area: '',
                    store: ''
                },
                // 新建合同的数据
                addForm: {
                    name: '',
                    url: ''
                },
                // 验证规则
                addRules: {
                    name: [
                        { required: true, message: '请输入合同名称', trigger: 'blur' },
                    ],
                },
                dialogAdd: false,
                loading: true,
                areaList: [], // 区域列表
                storeList: [], // 门店列表
                tableData: [],
                total: '', // 总的条数
                page: 1, // 当前页数
                dialogPreview: false, // 预览的dialog
                fileList: [], // 上传的文件
                autofocus: false,
                contractName: '', // 合同名称
                progressSeen: false
            }
        },
        created() {
            this._merchList()
            this._storeList()
            this._signContractList(this.page)
        },
        methods: {
          // 获取合同列表
          async _signContractList(page) {
            let params = {p: page, length: 10,name: this.form.name}
            const res = await signContractList(params)
            console.log(res)
            if (res.code === 0) {
              res.data.list.forEach( row => {
                row.is_show = true
                // console.log(row)
              })
              this.tableData = res.data.list
              this.total = res.data.total
              this.loading = false
            }
          },
          // 区域列表
          async _merchList() {
            let params = {status: 1}
            const res = await merchList(params)
            if (res.code === 0) {
              // console.log(res)
              this.areaList = res.data.merch
            }
          },
          // 门店列表
          async _storeList() {
            let params = {status: 1}
            const res = await storeList(params)
            if (res.code === 0) {
              console.log(res)
              this.storeList = res.data.store
            }
          },
          // 清空区域
          clearArea() {
            console.log(this.form)
          },
          // 清空门店
          clearStore() {
            console.log(this.form)
          },
          // 新建合同
          addContract() {
            this.dialogAdd = true
          },
          // 新建合同dialog 关闭事件
          dialogAddClose() {
            this.$refs.addForm.resetFields()
            this.fileList = []
            this.progressSeen = false
          },
          // 新建合同dialog 确定事件
          dialogAddSure() {
            this.$refs.addForm.validate( async valid => {
              if (!valid) return false
              if (!this.addForm.url) return this.$message.warning('请先上传合同')
              const res = await addContract(this.addForm)
              if (res.code === 0) {
                this.$message.success('添加合同成功')
                this._signContractList(this.page)
                this.dialogAdd = false
              }
            })
          },
          // 预览
          handlePreview(index, row) {
            window.open(row.url, '_blank')
          },
          // 删除
          handleDelete(index, row) {
            // console.log(index, row)
            let arr = []
            arr.push(row.id)
            let params = {ids: arr, delete: 1}
            this.$confirm('此操作将永久删除该合同, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              const res = await deleteContract(params)
              if (res.code === 0) {
                // console.log(res)
                this.$message.success('删除成功!')
                this._signContractList(this.page)
              }

            }).catch(() => {
              this.$message.info('已取消删除')
            })
          },
          // 分页的 当前点击的页数
          currentPage(data) {
            console.log(`当前页: ${data}`)
            this.page = data
            this.loading = true
            this._signContractList(this.page)
          },
          // 上传文件接收的url
          chooseFile(url) {
            console.log(url)
            this.addForm.url = url
          },
          changeFile(data) {
            console.log(data)
            this.progressSeen = data
          },
          // 修改合同名称
          editContractName(index, row) {
            console.log(index, row)
            this.contractName = row.name
            row.is_show = false
            this.$nextTick(() => {
              // this.$refs.input.$el.children[0].focus()
              setTimeout(() => {
                // this.$refs['input' + row.id].$el.children[0].focus()
                this.$refs['input' + row.id].$el.querySelector('input').focus()
              }, 100)
            })
          },
          // 修改合同名称
          async makeSure(index, row) {
            // console.log(row)
            row.is_show = true
            if (this.contractName === row.name) return
            if (row.name.trim().length === 0) return row.name = this.contractName
            let params = {name: row.name, url: row.url, id: row.id}
            const res = await editContract(params)
            if (res.code === 0) {
              // console.log(res)
              this.$message.success('修改成功')
              this._signContractList(this.page)
            }
          }
        },
        components: {
            Pagination,
            UpPdf
        }
    }
</script>

<style scoped lang="scss">
    .header-title {
        .title-name {
            font-size: 18px;
            color: #333;
            font-weight: 600;
            margin-bottom: 0;
        }
        .title-info {
            font-size: 11px;
            color: #7d7d7d;
            margin-bottom: 0;
            margin-top: 4px;
        }
    }
</style>
